<template>
  <div>
    <modal-view ref="modalViewRef" width="850px" :before-submit="beforeSubmit" title="门店选择" submitText="确认选择"
      @close="close">
      <div class="page-body">
        <div class="page-left" v-loading="leftContentLoading">
          <div class="page-title">
            可选择门店
          </div>
          <div class="page-left-body">
            <!-- 区域 -->
            <div class="page-left-body-left">
              <div class="page-left-body-title">
                1. 区域筛选
              </div>
              <regional-tree @select-row="onSelectRow"></regional-tree>
            </div>
            <div class="page-left-body-right">
              <div class="page-left-body-title">
                2. 门店选择
              </div>
              <data-view key="dataview1" style="height:calc(100% - 20px);" v-model:searchValue="searchValue"
                v-model="leftContentDataList" :header-btn="['search']" :current-page="currentPage" :total="dataTotal"
                layout="total,prev, next,jumper"
                @update:current-page="onUpdateCurrentPage" @search="onSearch">
                <template #headerBtn>
                  <el-button type="primary" style="margin-left:10px" :disabled="leftContentDataList.length == 0"
                    @click="onClickAllSelect">全选
                  </el-button>
                </template>
                <el-table-column prop="Name" label="门店名称" show-overflow-tooltip />
                <el-table-column label="操作" width="80">
                  <template #default="{ row }">
                    <el-button type="text" size="small" @click="onClickCmpSelect(row)">选择
                    </el-button>
                  </template>
                </el-table-column>
              </data-view>
            </div>
          </div>
        </div>

        <div class="page-right">
          <div class="page-title">
            已选择门店
          </div>
          <data-view key="dataview2" style="height:calc(100% - 30px);margin-top:10px" v-model="tableList">
            <el-table-column prop="Name" label="门店名称" show-overflow-tooltip />
            <el-table-column label="操作" width="80">
              <template #default="{ $index }">
                <el-button type="text" size="small" @click="onClickDelete($index)">删除
                </el-button>
              </template>
            </el-table-column>
          </data-view>
        </div>
      </div>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick } from "vue";
import { CmpCategoryDataClass } from "@/views/apphome/DealerCmp/config";
import { request } from "@/utils/axios";
export default defineComponent({
  name: "StoreSelection",
})
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import DataView from "../DataView/DataView.vue";
import ModalView from "@/components/ModalView";
import { ElMessage } from "element-plus";
import RegionalTree from "@/components/RegionalTree";
import { treeToArray } from "@/utils/base";
import { RegionOrgDataClass } from "@/views/apphome/RegionOrg/config";

let props = withDefaults(defineProps<{ IsRadio?: boolean }>(), { IsRadio: false })
let emit = defineEmits<{
  (e: "close"): void;
  (e: "submit", value: CmpCategoryDataClass[]): void;
}>();

/**
 * 弹框
 */
let modalViewRef = ref();

/**
 * 页面展示
 */
function show(data: any[]) {
  if (!data) {
    throw new Error("[RegionSelection]show展示需要传递data");
  }

  tableList.value = data.map(item => {
    return new CmpCategoryDataClass(item);
  })

  /**
   * 打开页面
   */
  modalViewRef.value.show();
}

/**
 *  保存前校验
 */
function beforeSubmit(): Promise<void> {
  return new Promise((resolve, reject) => {
    emit("submit", tableList.value)
    resolve()
  })
}

/**
 * 关闭页面
 */
function close() {
  emit("close")
}

/**
 * 导出
 */
defineExpose({
  show
})

/**
 * ====================
 *  左侧
 * ====================
 */

/**
 * 门店展示loading
 */
let leftContentLoading = ref(false);

/**
 * 门店展示数据
 */
let leftContentDataList = ref<CmpCategoryDataClass[]>([]);

/**
 * 选择的区域id
 */
let orgId = ref(0);

/**
 * 搜索内容
 */
let searchValue = ref("");

/**
 * 数据总数量
 */
let dataTotal = ref(0);

/**
 * 当前页数
 */
let currentPage = ref(1);

/**
 * 左侧区域筛选
 */
function onSelectRow(row: RegionOrgDataClass) {
  orgId.value = row.Id;
  onSearch();
}

/**
 * 当点击搜索的时候 
 */
function onSearch() {
  currentPage.value = 1;
  getData();
}

/**
 * 当前页面更新
 */
function onUpdateCurrentPage(count: number) {
  currentPage.value = count;
  //重新加载数据
  getData();
}

/**
 * 获取门店数据
 */
function getData() {
  leftContentLoading.value = true;
  leftContentDataList.value = [];
  request("/Query/Get", {
    DocType: "DealerCmp",
    ActionType: "MeDealerCmp",
    ApiType: "PageList",
    Searchv: searchValue.value,
    Id: orgId.value,
    Start: currentPage.value,
    Limit: 25
  }).then((res: any) => {
    leftContentDataList.value = res.List.map((e: any) => {
      return new CmpCategoryDataClass(e)
    })
    dataTotal.value = res.Total
    leftContentLoading.value = false;
  }).catch(() => {
    leftContentLoading.value = false;
  })
}

/**
 * 点击选择门店
 */
function onClickCmpSelect(row: CmpCategoryDataClass) {
  tableAddRow(row);
}

/**
 * 点击权限门店
 */
function onClickAllSelect() {
  for (let item of leftContentDataList.value) {
    tableAddRow(item);
  }
}


/**
 * ====================
 *  右侧选择列表
 * ====================
 */

/**
 * 右侧列表数据
 */
let tableList = ref<CmpCategoryDataClass[]>([]);

/**
 * 右侧新增一条数据
 */
function tableAddRow(row: CmpCategoryDataClass) {

  for (let item of tableList.value) {
    // 首先判断是否有重复的
    if (item.Id == row.Id) {
      ElMessage.warning(`[${row.Name}]已添加,无需重复添加`)
      return;
    }
  }
  //新增当前选项
  tableList.value.push(row);
}

/**
 * 手工删除一项
 */
function onClickDelete(index: number) {
  tableList.value.splice(index, 1);
}

/**
 * ====================
 *  页面初始化
 * ====================
 */


</script>

<style lang="less" scoped>
.page-body {
  height: 400px;
  display: flex;
  overflow: hidden;
}

.page-left {
  flex-shrink: 0;
  flex-basis: 500px;
  margin-right: 10px;
}

.page-left-body {
  display: flex;
  height: calc(100% - 20px);
  padding-top: 10px;
}

.page-left-body-title {
  height: 20px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.5);
}


.page-left-body-left {
  flex-basis: 220px;
  flex-shrink: 0;
}

.page-left-body-right {
  width:0;
  flex-grow: 1;
}


.page-right {
  flex-grow: 1;
}

.page-title {
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  border-left: 3px solid var(--primaryColor);
  padding-left: 5px;
  color: rgba(0, 0, 0, 0.5)
}
</style>

